<template>
    <div>
        <MySwiper v-if="datalist.length" :slides-per-view="3" :space-between="50" :loop="true" @slideChange="handleChange">
            <MySwiperItem v-for="{ nm, img, id } in datalist" :key="id">
                <!-- {{ nm }} -->
                <img :src="img" :alt="nm" style="width: 100%;">
            </MySwiperItem>
        </MySwiper>
    </div>
</template>

<script>
import MySwiper from './MySwiper.vue';
import MySwiperItem from './MySwiperItem.vue';
import axios from 'axios'

export default {
    components: {
        MySwiper,
        MySwiperItem
    },
    data() {
        return {
            datalist: [],
        }
    },
    mounted() {
        // setTimeout(() => {
        //     this.datalist = ["aaa", "bbb", "ccc", "ddd", "eee", "fff"]
        // }, 2000)
        axios.get("test.json").then(res => {
            console.log(res.data);
            this.datalist = res.data.data.hot
        })
    },
    methods: {
        handleChange(value) {
            console.log("App-activeIndex为" + value);
        }
    }
}
</script>